<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>el与data的两种写法</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!--
        data与el的两种写法:
            1.el有两种写法:
                (1).创建Vue实例时配置el属性;
                (2).先创建Vue实例，再通过vm.$mount('')指定el的值。
            2.data有两种写法：
                （1）对象式
                （2）函数式
                注意：组件中必须使用函数式。
            3.一个重要原则：
                由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
    -->

    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;
    Vue.prototype.$test = function () {
      console.log("test");
    };

    const vm = new Vue({
      el: "#root", // ①
      // data对象式写法:
      /* data: {
          name: 'Jack'
      }, */
      // data函数式写法:
      data() {
        // console.log(this);
        return {
          name: "Jack",
        };
      },
    });

    // vm.$mount('#root');// ②
  </script>
</html>
